<template>
  <div class="tenant">
    <div class="tenant-top">
      <div class="tenant-top-title">
        <img src="../../assets/images/tj.png" alt="" />
        <p>统计</p>
      </div>
      <div class="tenant-top-item-info">
        <div class="tenant-top-item">
          <div class="info-right-left">
            <div class="title">租户统计</div>
            <div class="info-content">
              <dl @click="archiveClick">
                <dt>
                  {{
                    (leaseUserGroupInfo && leaseUserGroupInfo.leaseUserNum) || 0
                  }}
                </dt>
                <dd>有偿租赁户数</dd>
              </dl>
              <dl @click="archiveClick">
                <dt>
                  {{
                    (leaseUserGroupInfo && leaseUserGroupInfo.noLeaseUserNum) ||
                    0
                  }}
                </dt>
                <dd>无偿租赁户数</dd>
              </dl>
              <dl @click="archiveClick">
                <dt>
                  {{ leaseInfo && leaseInfo.leaseNum }}
                </dt>
                <dd>累计户数</dd>
              </dl>
            </div>
          </div>
        </div>

        <div class="tenant-top-item">
          <div class="info-right-left">
            <div class="title">租赁记录智能提醒</div>
            <div class="info-content">
              <dl @click="leaseRemindClick(2)">
                <dt>{{ leaseRemindInfo && leaseRemindInfo.leaseRemindNum }}</dt>
                <dd>提醒</dd>
              </dl>
              <dl @click="leaseRemindClick(1)">
                <dt>
                  {{ leaseRemindInfo && leaseRemindInfo.leaseUrgencyNum }}
                </dt>
                <dd>紧急</dd>
              </dl>
              <dl @click="leaseRemindClick(0)">
                <dt>
                  {{ leaseRemindInfo && leaseRemindInfo.leaseOverdueNum }}
                </dt>
                <dd>超期</dd>
              </dl>
            </div>
          </div>
        </div>
        <div class="tenant-top-item">
          <div class="info-right-right">
            <div class="title">租金缴纳智能提醒</div>
            <div class="info-content">
              <dl @click="leaseRentRemindClick(2)">
                <dt>
                  {{ leaseRemindInfo && leaseRemindInfo.leaseRentRemindNum }}
                </dt>
                <dd>提醒</dd>
              </dl>
              <dl @click="leaseRentRemindClick(1)">
                <dt>
                  {{ leaseRemindInfo && leaseRemindInfo.leaseRentUrgencyNum }}
                </dt>
                <dd>紧急</dd>
              </dl>
              <dl @click="leaseRentRemindClick(0)">
                <dt>
                  {{ leaseRemindInfo && leaseRemindInfo.leaseRentOverdueNum }}
                </dt>
                <dd>超期</dd>
              </dl>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="tenant-bottom">
      <div class="tenant-top-title">
        <img src="../../assets/images/sxx.png" alt="" />
        <p>筛选项</p>
      </div>
      <div class="tenant-bottom-content">
        <div class="tenant-bottom-content-filter">
          <el-row>
            <el-col :span="4" class="filter-item">
              <p>租户名称：</p>
              <el-input v-model="form.leaseUserName" style="width: 80%" />
            </el-col>
            <el-col :span="4" class="filter-item">
              <p>租户类型：</p>
              <el-select
                v-model="form.leaseUserType"
                placeholder="请选择"
                style="width: 80%"
              >
                <el-option
                  v-for="item in leaseUserTypeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="4" class="filter-item">
              <p>联系方式：</p>
              <el-input v-model="form.leaseUserPhone" style="width: 80%" />
            </el-col>
            <el-col :span="4" class="filter-item"
              ><p>所属社区：</p>
              <el-select
                v-model="form.propertyCommunity"
                placeholder="请选择"
                style="width: 80%"
                clearable
                @change="choseChange"
              >
                <el-option
                  v-for="item in communityList"
                  :key="item.areaId"
                  :label="item.areaName"
                  :value="item.areaId"
                >
                </el-option>
              </el-select>
            </el-col>

            <el-col
              :span="6"
              class="filter-item"
              style="justify-content: flex-end; margin-top: 6px"
            >
              <el-button type="primary" @click="searchClick">查询</el-button>
              <el-button type="primary" plain @click="resetClick"
                >重置</el-button
              >
            </el-col>
          </el-row>
        </div>
        <el-button
          type="primary"
          @click="addTenantClick"
          style="margin-left: 48px"
          v-if="permissions.includes('tenant:add:disabled')"
          ><i class="el-icon-plus"></i> 添加租户</el-button
        >
        <el-table
          :data="tableData"
          v-loading="loading"
          style="width: 95%; margin: 15px auto"
          :height="tableHight"
        >
          <el-table-column label="序号" width="100" align="center">
            <template slot-scope="scope">{{
              (form.pageNum - 1) * form.pageSize + scope.$index + 1
            }}</template>
          </el-table-column>
          <el-table-column prop="leaseUserName" label="租户名称" align="center">
          </el-table-column>
          <el-table-column prop="leaseUserType" label="租户类型" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.leaseUserType === 1">企业/个体户</span>
              <span v-else-if="scope.row.leaseUserType === 2">个人</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="enterpriseUserName"
            label="联系人"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="leaseUserPhone"
            label="联系方式"
            width="180"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="leaseInfoNoNum" align="center">
            <template slot="header">
              <span>租赁记录</span><br />
              <span>（未归档/总数）</span>
            </template>
          </el-table-column>
          <el-table-column prop="leaseNatures" label="租赁性质" align="center">
            <template slot-scope="scope">
              <span
                style="color: #0052d9"
                v-if="scope.row.leaseNatures.includes(1)"
                >有偿租赁</span
              >
              <span
                v-if="
                  scope.row.leaseNatures.includes(1) &&
                  scope.row.leaseNatures.includes(0)
                "
                >、</span
              >
              <span
                style="color: #f1902b"
                v-if="scope.row.leaseNatures.includes(0)"
                >无偿使用</span
              >
            </template>
          </el-table-column>
          <el-table-column
            prop="propertyCommunityNames"
            label="所属社区"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="leaseRemind" align="center">
            <template slot="header">
              <span>租赁协议</span><br />
              <span>(提醒/紧急/超期)</span>
            </template>
            <template slot-scope="scope">
              <span
                style="color: #0052d9; cursor: pointer"
                @click="leaseRemindClick(2, scope.row.leaseUserId)"
                >{{ scope.row.leaseRemind.leaseRemindNum }}</span
              >
              /
              <span
                style="color: #f1902b; cursor: pointer"
                @click="leaseRemindClick(1, scope.row.leaseUserId)"
                >{{ scope.row.leaseRemind.leaseUrgencyNum }}</span
              >
              /
              <span
                style="color: #f56c6c; cursor: pointer"
                @click="leaseRemindClick(0, scope.row.leaseUserId)"
                >{{ scope.row.leaseRemind.leaseOverdueNum }}</span
              >
            </template>
          </el-table-column>
          <el-table-column prop="leaseRemind" align="center">
            <template slot="header">
              <span>租金缴纳</span><br />
              <span>(提醒/紧急/超期)</span>
            </template>
            <template slot-scope="scope">
              <span
                style="color: #0052d9; cursor: pointer"
                @click="leaseRentRemindClick(2, scope.row.leaseUserId)"
                >{{ scope.row.leaseRemind.leaseRentRemindNum }}</span
              >
              /
              <span
                style="color: #f1902b; cursor: pointer"
                @click="leaseRentRemindClick(1, scope.row.leaseUserId)"
                >{{ scope.row.leaseRemind.leaseRentUrgencyNum }}</span
              >
              /
              <span
                style="color: #f56c6c; cursor: pointer"
                @click="leaseRentRemindClick(0, scope.row.leaseUserId)"
                >{{ scope.row.leaseRemind.leaseRentOverdueNum }}</span
              >
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <span
                style="color: #0064c8; cursor: pointer"
                @click="seeHandleClick(scope.row)"
                v-if="permissions.includes('tenant:view:disabled')"
                >查看</span
              >
              <el-divider direction="vertical" v-if="permissions.includes('tenant:edit:disabled')"></el-divider>
              <span
                style="color: #0064c8; cursor: pointer"
                @click="editHandleClick(scope.row)"
                v-if="permissions.includes('tenant:edit:disabled')"
                >编辑</span
              >
              <el-divider direction="vertical" v-if="permissions.includes('tenant:delete:disabled')"></el-divider>
              <el-popconfirm
                title="是否删除当前租户信息？"
                @confirm="deleteHandleClick(scope.row)"
                @onConfirm="deleteHandleClick(scope.row)"
                v-if="permissions.includes('tenant:delete:disabled')"
              >
                <span style="color: #f56c6c; cursor: pointer" slot="reference"
                  >删除</span
                >
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="form.pageNum"
          :limit.sync="form.pageSize"
          @pagination="getLeasePage"
        />
      </div>
    </div>

    <el-dialog title="添加租户" :visible.sync="tenantDialogVisible" width="30%">
      <el-form
        ref="tenantForm"
        :model="tenantForm"
        label-width="150px"
        :rules="rules"
      >
        <el-form-item label="租户类型:">
          <el-radio-group v-model="tenantForm.leaseUserType" style="width: 80%">
            <el-radio :label="1">企业/个体户</el-radio>
            <el-radio :label="2">个人</el-radio>
          </el-radio-group>
        </el-form-item>
        <div class="content">
          <el-form-item label="租户名称：" prop="leaseUserName">
            <el-input
              v-model="tenantForm.leaseUserName"
              style="width: 80%"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="统一社会信用代码："
            v-if="tenantForm.leaseUserType === 1"
          >
            <el-input
              v-model="tenantForm.enterpriseCode"
              style="width: 80%"
            ></el-input>
          </el-form-item>
          <el-form-item label="身份证：" v-if="tenantForm.leaseUserType === 2">
            <el-input
              v-model="tenantForm.leaseUserIdentityCard"
              style="width: 80%"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="联系人："
            v-if="tenantForm.leaseUserType === 1"
            prop="enterpriseUserName"
          >
            <el-input
              v-model="tenantForm.enterpriseUserName"
              style="width: 80%"
            ></el-input>
          </el-form-item>
          <el-form-item label="联系方式：" prop="leaseUserPhone">
            <el-input
              v-model="tenantForm.leaseUserPhone"
              style="width: 80%"
            ></el-input>
          </el-form-item>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="tenantSaveClick">保 存</el-button>
        <el-button @click="tenantDialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>

    <el-drawer
      title="租赁记录-紧急提醒"
      :visible.sync="recordDrawer"
      direction="rtl"
      :before-close="handleClose"
      :with-header="false"
      size="75%"
    >
      <div class="drawer-header">
        <div
          class="drawer-status"
          style="color: #0052d9"
          v-if="leaseRemindStatus === 2"
        >
          租赁记录-提醒
        </div>
        <div
          class="drawer-status"
          style="color: #f1902b"
          v-if="leaseRemindStatus === 1"
        >
          租赁记录-紧急
        </div>
        <div
          class="drawer-status"
          style="color: #f56c6c"
          v-if="leaseRemindStatus === 0"
        >
          租赁记录-超期
        </div>
        <div class="drawer-num">{{ leaseRemindListData.length }}条提醒</div>
      </div>
      <div class="drawer-filter">
        <el-input
          placeholder="请输入租户名称"
          v-model="leaseUserName"
          class="input-with-select"
        >
          <el-button slot="append" @click="leaseSearch">搜索</el-button>
        </el-input>
        <el-button type="primary" size="small">催发短信</el-button>
      </div>
      <div class="drawer-table">
        <el-table
          :data="leaseRemindListData"
          style="width: 98%; margin: 0 auto"
          height="calc(100vh - 150px)"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column label="序号" width="55" align="center">
            <template slot-scope="scope">{{
              (drawerForm.pageNum - 1) * drawerForm.pageSize + scope.$index + 1
            }}</template>
          </el-table-column>
          <el-table-column prop="leaseUserName" label="租户名称" width="120">
          </el-table-column>
          <el-table-column prop="enterpriseUserName" label="联系人" width="100">
          </el-table-column>
          <el-table-column prop="leaseUserPhone" label="联系方式">
          </el-table-column>
          <el-table-column prop="propertyCode" label="资产地块编号">
          </el-table-column>
          <el-table-column prop="propertyName" label="资产地块">
          </el-table-column>
          <el-table-column prop="propertyCommunityName" label="所在社区">
          </el-table-column>
          <el-table-column
            prop="propertyTypeName"
            label="租赁资产类型"
            width="120"
          >
          </el-table-column>
          <el-table-column prop="R7" label="门牌号/栋号" width="120">
            <template slot-scope="scope">
              {{ scope.row.doorCode }} / {{ scope.row.dongCode }}
            </template>
          </el-table-column>
          <el-table-column prop="endDate" label="租赁合同终止日期">
          </el-table-column>
          <el-table-column prop="sendSmsNum" label="短信发送次数">
          </el-table-column>
        </el-table>
        <!-- <pagination
          v-show="drawerTotal > 0"
          :total="drawerTotal"
          :page.sync="drawerForm.pageNum"
          :limit.sync="drawerForm.pageSize"
          @pagination="drawerIndexPage"
        /> -->
      </div>
    </el-drawer>

    <el-drawer
      title="租金缴纳-紧急提醒"
      :visible.sync="rentDrawer"
      direction="rtl"
      :before-close="handleClose"
      :with-header="false"
      size="75%"
    >
      <div class="drawer-header">
        <div
          class="drawer-status"
          style="color: #0052d9"
          v-if="rentLeaseRemindStatus === 2"
        >
          租金缴纳-提醒
        </div>
        <div
          class="drawer-status"
          style="color: #f1902b"
          v-if="rentLeaseRemindStatus === 1"
        >
          租金缴纳-紧急
        </div>
        <div
          class="drawer-status"
          style="color: #f56c6c"
          v-if="rentLeaseRemindStatus === 0"
        >
          租金缴纳-超期
        </div>
        <div class="drawer-num">{{ rentLeaseRemindListData.length }}条提醒</div>
      </div>
      <div class="drawer-filter">
        <el-input
          placeholder="请输入租户名称"
          v-model="leaseUserName"
          class="input-with-select"
        >
          <el-button slot="append" @click="rentLeaseSearch">搜索</el-button>
        </el-input>
        <el-button type="primary" size="small">催发短信</el-button>
      </div>
      <div class="drawer-table">
        <el-table
          :data="rentLeaseRemindListData"
          style="width: 98%; margin: 0 auto"
          height="calc(100vh - 150px)"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column label="序号" width="55" align="center">
            <template slot-scope="scope">{{
              (drawerForm.pageNum - 1) * drawerForm.pageSize + scope.$index + 1
            }}</template>
          </el-table-column>
          <el-table-column prop="leaseUserName" label="租户名称" width="120">
          </el-table-column>
          <el-table-column prop="enterpriseUserName" label="联系人" width="100">
          </el-table-column>
          <el-table-column prop="leaseUserPhone" label="联系方式">
          </el-table-column>
          <el-table-column prop="propertyCode" label="资产地块编号">
          </el-table-column>
          <el-table-column prop="propertyTypeName" label="资产地块">
          </el-table-column>
          <el-table-column prop="propertyCommunityName" label="所在社区">
          </el-table-column>
          <el-table-column
            prop="propertyTypeName"
            label="租赁资产类型"
            width="120"
          >
          </el-table-column>
          <el-table-column prop="R7" label="门牌号/栋号" width="120">
            <template slot-scope="scope">
              {{ scope.row.doorCode }} / {{ scope.row.dongCode }}
            </template>
          </el-table-column>
          <el-table-column
            prop="rentAmount"
            label="租金缴纳金额（万元/年）"
            width="120"
          >
          </el-table-column>
          <el-table-column prop="endDate" label="租金到期日期">
          </el-table-column>
          <el-table-column prop="sendSmsNum" label="短信发送次数">
          </el-table-column>
        </el-table>
        <!-- <pagination
          v-show="drawerTotal > 0"
          :total="drawerTotal"
          :page.sync="drawerForm.pageNum"
          :limit.sync="drawerForm.pageSize"
          @pagination="drawerIndexPage"
        /> -->
      </div>
    </el-drawer>
  </div>
</template>

<script>
import {
  leaseUserTotal,
  leaseRemind,
  leasePage,
  leaseRemindList,
  leaseRentRemindList,
  delLeaseUser,
  editLeaseUserList,
  addLeaseUserList,
} from "@/api/tenant";
import {
  areaList,
  cockpitLeaseuserTypeGroup,
  leaseUserGroup,
} from "@/api/shops";

export default {
  data() {
    return {
      leaseInfo: null,
      leaseRemindInfo: null,
      total: 0,
      form: {
        leaseUserName: "",
        leaseUserType: "",
        leaseUserPhone: "",
        propertyCommunity: undefined,
        pageNum: 1,
        pageSize: 10,
      },
      tableHight: "calc(100vh - 495px)",
      tableData: [],
      tenantDialogVisible: false, // 租户dialog
      leaseUserTypeList: [
        {
          label: "企业/个体户",
          value: 1,
        },
        {
          label: "个人",
          value: 2,
        },
      ],
      leaseRemindStatus: 2,
      rentLeaseRemindStatus: 2,
      leaseUserId: undefined,
      communityList: [], // 所在社区listareaList
      fileList: [],
      tenantForm: {
        leaseUserType: 1,
        leaseUserName: undefined,
        leaseUserPhone: undefined,
        enterpriseUserName: undefined,
        enterpriseCode: undefined,
        leaseUserIdentityCard: undefined,
        leaseUserId: undefined,
      },
      recordDrawer: false,
      rentDrawer: false,
      input3: "",
      drawerTotal: 10,
      leaseRemindListData: [],
      rentLeaseRemindListData: [],
      propertyCode: "",
      leaseUserName: undefined,
      remindStatus: 2,
      drawerForm: {
        pageNum: 1,
        pageSize: 10,
      },
      assetTypeList: [], // 资产类型List
      deptsList: [], // 管理部门
      userTotal: 0,
      leaseUserGroupInfo: null,
      zulingArr: [
        {
          label: "经营性",
          value: 1,
        },
        {
          label: "非经营性",
          value: 0,
        },
      ],
      archiveTableData: [
        {
          W1: "16.5",
          W2: "3%",
          W3: "2024.12.01",
          W4: "是",
          W5: "2024.12.01",
          W6: "16.356",
        },
        {
          W1: "17.5",
          W2: "3%",
          W3: "2025.12.01",
          W4: "否",
          W5: "",
          W6: "",
        },
      ],
      archiveform: {
        pageNum: 1,
        pageSize: 10,
      },
      depositTableData: [
        {
          Q1: "2023.12.01",
          Q2: 5,
        },
      ],
      depositform: {
        pageNum: 1,
        pageSize: 10,
      },
      rules: {
        leaseUserName: [
          { required: true, message: "请输入租户名称", trigger: "blur" },
        ],
        enterpriseUserName: [
          { required: true, message: "请输入联系人", trigger: "blur" },
        ],
        leaseUserPhone: [
          { required: true, message: "请输入联系方式", trigger: "blur" },
        ],
      },
    };
  },
  computed:{
    permissions() {
      return this.$store.getters.permissions
    }
  },
  mounted() {
    this.getLeaseUserTotal();
    this.getLeaseRemind();
    this.getLeasePage();
    this.getAreaList();
    this.getCockpitLeaseuserTypeGroup();
    this.getLeaseUserGroup();
    let userInfo = JSON.parse(localStorage.getItem("userInfo"));
    this.deptsList = this.removeEmptyChildren(userInfo.depts);
  },
  methods: {
    seeHandleClick(row) {
      this.$router.push({
        path: "/tenants/leaseTenantDetails",
        query: row,
      });
      // if (row.leaseNatures.includes(0)) {
      //   // 非经营性
      //   this.$router.push({
      //     path: "/tenants/tenantDetails",
      //     query: row,
      //   });
      // } else if (row.leaseNatures.includes(1)) {
      //   // 经营性
      //   this.$router.push({
      //     path: "/tenants/leaseTenantDetails",
      //     query: row,
      //   });
      // } else {
      //   // 未设置经营性或者非经营性
      //   this.$router.push({
      //     path: "/tenants/leaseTenantDetails",
      //     query: row,
      //   });
      // }
    },
    //资产租户情况分析
    getCockpitLeaseuserTypeGroup() {
      let params = {
        propertyCategoryId: "",
        ownershipId: "",
        manageDeptId: "",
        propertyCommunity: "",
      };
      cockpitLeaseuserTypeGroup(params).then((res) => {
        if (res.code == 200) {
          if (res.data && res.data.length > 0) {
            this.userTotal = res.data
              .map((v) => v.leaseUserNum)
              .reduce((sum, num) => {
                return sum + num;
              });
          } else {
            this.userTotal = 0;
          }
        }
      });
    },

    getLeaseUserGroup() {
      let params = {
        propertyCategoryId: "",
        ownershipId: "",
        manageDeptId: "",
        propertyCommunity: "",
      };
      leaseUserGroup(params).then((res) => {
        if (res.code == 200) {
          this.leaseUserGroupInfo = res.data;
        }
      });
    },

    editHandleClick(row) {
      let data = Object.assign({}, row);
      this.tenantDialogVisible = true;
      if (data) {
        this.tenantForm.leaseUserType = data.leaseUserType;
        this.tenantForm.leaseUserName = data.leaseUserName;
        this.tenantForm.leaseUserPhone = data.leaseUserPhone;
        this.tenantForm.enterpriseUserName = data.enterpriseUserName;
        this.tenantForm.enterpriseCode = data.enterpriseCode;
        this.tenantForm.leaseUserIdentityCard = data.leaseUserIdentityCard;
        this.tenantForm.leaseUserId = data.leaseUserId;
      }
    },
    // 删除
    deleteHandleClick(row) {
      delLeaseUser(row.leaseUserId).then((res) => {
        this.$message.success("删除成功");
        this.getLeasePage();
      });
    },
    // 添加租户
    addTenantClick() {
      this.tenantDialogVisible = true;
    },
    handleSelectionChange() {},
    drawerIndexPage() {},
    leaseSearch() {
      this.getLeaseRemindList();
    },
    rentLeaseSearch() {
      this.getLeaseRentRemindList();
    },
    // 租赁记录智能提醒
    leaseRemindClick(value, leaseUserId) {
      this.recordDrawer = true;
      this.leaseRemindStatus = value;
      this.remindStatus = value;
      this.leaseUserId = leaseUserId;
      this.getLeaseRemindList();
    },
    //租金缴纳智能提醒
    leaseRentRemindClick(value, leaseUserId) {
      this.rentDrawer = true;
      this.rentLeaseRemindStatus = value;
      this.remindStatus = value;
      this.leaseUserId = leaseUserId;
      this.getLeaseRentRemindList();
    },

    archiveClick() {},
    handlePreview() {},
    handleRemove() {},
    handleExceed() {},

    removeEmptyChildren(arr) {
      return arr.map((item) => {
        if (item.children.length === 0) {
          return {
            label: item.deptName,
            value: item.deptId,
          };
        } else {
          return {
            label: item.deptName,
            value: item.deptId,
            children: this.removeEmptyChildren(item.children),
          };
        }
      });
    },
    // 资产类型
    getDataList() {
      let params = {
        dictType: "property_type",
      };
      dataList(params).then((res) => {
        this.assetTypeList = res.rows;
      });
    },

    // 租户总数
    getLeaseUserTotal() {
      let params = {};
      leaseUserTotal(params).then((res) => {
        if (res.code === 200) {
          this.leaseInfo = res.data;
        }
      });
    },
    // 智能提醒
    getLeaseRemind() {
      leaseRemind().then((res) => {
        if (res.code === 200) {
          this.leaseRemindInfo = res.data;
        }
      });
    },

    // 所在社区
    getAreaList() {
      let params = {
        areaName: "",
        parentId: "",
      };
      areaList(params).then((res) => {
        this.communityList = res.data;
        this.communityList.unshift({
          areaName: "全部",
          areaId: "",
        });
      });
    },
    getLeasePage() {
      this.loading = true;
      let params = {
        ...this.form,
      };
      leasePage(params).then((res) => {
        if (res.code === 200) {
          this.tableData = res.rows;
          this.total = res.total;
          this.loading = false;
        }
      });
    },

    getLeaseRemindList() {
      let params = {
        leaseUserName: this.leaseUserName,
        remindStatus: this.remindStatus,
        leaseUserId: this.leaseUserId,
        propertyCode: this.propertyCode,
      };
      leaseRemindList(params).then((res) => {
        if (res.code === 200) {
          this.leaseRemindListData = res.data;
        }
      });
    },
    getLeaseRentRemindList() {
      let params = {
        leaseUserName: this.leaseUserName,
        remindStatus: this.remindStatus,
        leaseUserId: this.leaseUserId,
        propertyCode: this.propertyCode,
      };
      leaseRentRemindList(params).then((res) => {
        if (res.code === 200) {
          this.rentLeaseRemindListData = res.data;
        }
      });
    },
    // 添加租户
    tenantSaveClick() {
      let params = this.tenantForm;
      this.$refs.tenantForm.validate((valid) => {
        if (valid) {
          if (this.tenantForm.leaseUserId) {
            editLeaseUserList(params).then((res) => {
              if (res.code === 200) {
                this.tenantDialogVisible = false;
                this.$message.success("编辑成功");
                this.getLeasePage();

                this.tenantForm = {
                  leaseUserType: 1,
                  leaseUserName: undefined,
                  leaseUserPhone: undefined,
                  enterpriseUserName: undefined,
                  enterpriseCode: undefined,
                  leaseUserIdentityCard: undefined,
                  leaseUserId: undefined,
                };
              }
            });
          } else {
            addLeaseUserList(params).then((res) => {
              if (res.code === 200) {
                this.tenantDialogVisible = false;
                this.$message.success("新增成功");
                this.getLeasePage();

                this.tenantForm = {
                  leaseUserType: 1,
                  leaseUserName: undefined,
                  leaseUserPhone: undefined,
                  enterpriseUserName: undefined,
                  enterpriseCode: undefined,
                  leaseUserIdentityCard: undefined,
                  leaseUserId: undefined,
                };
              }
            });
          }
        }
      });
    },
    searchClick() {
      this.getLeasePage();
    },
    resetClick() {
      this.form = {
        leaseUserName: "",
        leaseUserType: "",
        leaseUserPhone: "",
        propertyCommunity: "",
        pageNum: 1,
        pageSize: 10,
      };
      this.getLeasePage();
    },
  },
};
</script>

<style lang="scss" scoped>
.tenant {
  width: 98%;
  margin: 16px auto;
  height: calc(100vh - 100px);
  .tenant-top {
    width: 100%;
    height: auto;
    background: #ffffff;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.16);
    border-radius: 6px 6px 6px 6px;
    margin-bottom: 16px;

    .tenant-top-item-info {
      display: flex;
      align-items: center;
      justify-content: space-around;
      width: 90%;
      margin: 0 auto;
      padding-bottom: 20px;
      .tenant-top-item-forall {
        width: 30%;
        height: 125px;
        background-color: #f3f7fb;
        display: inline-flex;
        .tenant-top-item-ly {
          width: 50%;
          .tenant-top-item-all {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 15px;
          }
          .top-item-title {
            color: #000;
            border-left: 6px solid #10c6ff;
            margin: 20px 18px;
            padding-left: 9px;
          }
          .tenant-top-item-left {
            width: 40px;
            img {
              width: 100%;
            }
          }

          .tenant-top-item-right {
            text-align: center;
            margin-left: 15px;
            font-size: 36px;
          }
        }
      }

      .tenant-top-item {
        width: 30%;
        height: 125px;
        background-color: #f3f7fb;
        .tenant-top-item-all {
          display: flex;
          justify-content: center;
          align-items: center;
          margin-top: 15px;
        }
        .top-item-title {
          color: #000;
          border-left: 4px solid #10c6ff;
          margin: 8px 18px;
          padding-left: 9px;
        }
        .tenant-top-item-left {
          width: 40px;
          img {
            width: 100%;
          }
        }
        .tenant-top-item-right {
          text-align: center;
          margin-left: 25px;
          font-size: 48px;
        }

        .info-right-left {
          width: 100%;
        }
        .info-right-right {
          width: 100%;
        }
        .info-content {
          display: flex;
          margin-top: -20px;
          dl {
            width: 33%;
            text-align: center;
            padding-top: 10px;
            cursor: pointer;
            dt {
              font-size: 36px;
              font-weight: 600;
              padding-bottom: 5px;
            }
            dd {
              margin-left: 0;
            }
            &:nth-child(1) {
              dt {
                color: #0052d9;
              }
            }
            &:nth-child(2) {
              dt {
                color: #f1902b;
              }
            }
            &:nth-child(3) {
              dt {
                color: #f56c6c;
              }
            }
          }
        }
        .title {
          border-left: 6px solid #10c6ff;
          font-size: 16px;
          color: #1b213b;
          padding-left: 8px;
          margin-top: 20px;
          margin-left: 20px;
        }
      }
    }
  }
  .tenant-bottom {
    width: 100%;
    background: #ffffff;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.16);
    border-radius: 6px 6px 6px 6px;
    .tenant-bottom-content {
      .tenant-bottom-content-filter {
        margin-left: 25px;
        .filter-item {
          display: flex;
          align-items: center;
          margin-left: 20px;
          p {
            min-width: 30%;
          }
        }
      }
    }
  }

  .tenant-top-title {
    display: flex;
    align-items: center;
    margin-left: 15px;
    img {
      width: 30px;
      height: 30px;
    }
    p {
      font-weight: bold;
      font-size: 16px;
      color: #1b213b;
      padding-left: 5px;
    }
  }
}
</style>

<style lang="scss">
.tenant {
  .el-dialog {
    border-radius: 5px;
  }
  .dialog-footer {
    .el-button {
      color: #0064c8;
      border: 1px solid #0064c8;
    }
    .el-button--primary {
      color: #ffffff;
    }
    .el-dialog__footer {
      text-align: center;
    }

    .el-form-item__label {
      color: #000;
    }
    .el-form-item__content {
      // width: 60%;
      display: flex;
    }
    .el-radio-group {
      display: flex;
      margin-top: 12px;
    }
    .el-form-item {
      margin-bottom: 15px;
    }
    .content {
      background: #fafafa;
      padding: 10px 0 5px 0;
      margin-bottom: 15px;
      .el-form-item {
        margin-bottom: 20px;
      }
    }
  }
  .el-dialog__body {
    padding: 0 !important;
  }

  .drawer-header {
    height: 40px;
    line-height: 40px;
    width: 100%;
    background: #fafafa;
    display: flex;
    align-items: center;
    .drawer-status {
      color: #f1902b;
      font-size: 16px;
      padding-left: 23px;
    }
    .drawer-num {
      color: #88909b;
      font-size: 14px;
      padding-left: 25px;
    }
  }
  .drawer-filter {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 15px 20px;
    .input-with-select {
      width: 30%;
    }
    .el-input-group__append button.el-button {
      background-color: #0052d9;
      border-color: #0052d9;
      color: #fff;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
    .el-button--primary {
      background-color: #0052d9;
      border-color: #0052d9;
    }
  }

  .el-table .cell {
    　white-space: pre-line;
  }
}
</style>
